import React from 'react';
import { Tree } from 'antd';
import type { TreeDataNode, TreeProps } from 'antd';
import { useComponentsStore } from '../../stores/components';
import { DownOutlined } from '@ant-design/icons';


export default function Outline() {
    
    const { components,setCurComponentId } = useComponentsStore((state: any) => state)
        
    
  return (
    <Tree
    fieldNames={{title:'desc',key:'id'}}   
    treeData={components as any[]}
    defaultExpandAll
    showLine
    switcherIcon={<DownOutlined />}
    onSelect={(selectedKeys)=>{
        setCurComponentId(selectedKeys[0])
    }}

    />
  )
}
